<template>

    <div class="container">
        <Category title="美食" :listData="foods">
            <img src="http://5b0988e595225.cdn.sohucs.com/images/20190606/30f1f89cfe5f40bcbb3d5e9f16cc1d2b.jpeg" alt="">
        </Category>

        <Category title="游戏" :listData="games">
            <ul>
                <li v-for="(g,index) in games" :key="index">{{g}}</li>
            </ul>
        </Category>
        <Category title="电影" :listData="films">
            <img src="https://inews.gtimg.com/newsapp_bt/0/13769197901/1000" alt="">
        </Category>

    </div>


</template>

<!--组件交互相关的代码-->
<script>
    import Category from './components/Category'

    export default {
        name: 'App',
        components: {
            Category
        },
        data() {
            return {
                foods: ['火锅', '烧烤', '小龙虾', '牛排'],
                games: ['超级玛丽', '王者荣耀', '穿越火线', '刺激战场'],
                films: ['《教父》', '《拆弹专家》', '《尚硅谷》', '《变形金刚》']
            }
        }
    }

</script>
<style>
    .container {
        display: flex;
        justify-content: space-around;
    }
</style>




